<template>
    <div>
        <div>
            <button @click="componentName = 'One'">One</button>
            <button @click="componentName = 'Two'">Two</button>
            <button @click="componentName = 'Three'">Three</button>
        </div>
        <!-- 
      动态组件:
        可以通过 Vue 的 <component> 元素加一个特殊的 is 属性 来实现动态组件
        is属性的值就是一个字符串,代表的就是要替换当前component组件的组件名称
     -->
        <!-- 
      缓存组件
        <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
        属性:
          include属性:包含哪些组件需要被缓存
            - 字符串 'One,Two'
            - 数组  ['One','Two']
            - 正则 /One|Two/g

          exclude属性:包含哪些组件不需要被缓存,其他和include类似
      -->
        <!-- <keep-alive include="One,Two">
      <component :is="componentName"></component>
    </keep-alive> -->
        <!-- <keep-alive :include="['One', 'Two']">
      <component :is="componentName"></component>
    </keep-alive> -->
        <keep-alive :include="/One | Two/g">
            <component :is="componentName"></component>
        </keep-alive>
    </div>
</template>

<script>
import One from "@/components/One";
import Two from "@/components/One";
import Three from "@/components/One";
export default {
    name: "App",
    components: {
        One,
        Two,
        Three,
    },
    data() {
        return {
            componentName: "One",
        };
    },
};
</script>
